<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<title>SVG bounding boxes are valid for a zero-width or zero-height rect</title>
<svg height="0">
  <rect height="100" width="0"/>
  <rect height="0" width="100"/>
  <rect vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect vector-effect="non-scaling-stroke" height="0" width="100"/>
  <rect rx="10" vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect rx="10" vector-effect="non-scaling-stroke" height="0" width="100"/>
  <rect ry="10" vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect ry="10" vector-effect="non-scaling-stroke" height="0" width="100"/>
  <rect rx="10" ry="10" vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect rx="10" ry="10" vector-effect="non-scaling-stroke" height="0" width="100"/>
  <rect x="100" y="200" height="100" width="0"/>
  <rect x="100" y="200" height="0" width="100"/>
  <rect x="100" y="200" vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect x="100" y="200" vector-effect="non-scaling-stroke" height="0" width="100"/>
  <rect x="100" y="200" rx="10" vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect x="100" y="200" rx="10" vector-effect="non-scaling-stroke" height="0" width="100"/>
  <rect x="100" y="200" ry="10" vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect x="100" y="200" ry="10" vector-effect="non-scaling-stroke" height="0" width="100"/>
  <rect x="100" y="200" rx="10" ry="10" vector-effect="non-scaling-stroke" height="100" width="0"/>
  <rect x="100" y="200" rx="10" ry="10" vector-effect="non-scaling-stroke" height="0" width="100"/>
</svg>
<script>
BBox = function(x,y,w,h) {
  this.x = x;
  this.y = y;
  this.width = w;
  this.height = h;
};
BBox.prototype.toString = function() {
  return this.x + "," + this.y + "," + this.width + "," + this.height;
};
// The order of expected sizes should equal the document order of the rects.
var expectedBoxes = [
  new BBox(0, 0, 0, 100),
  new BBox(0, 0, 100, 0),
  new BBox(0, 0, 0, 100),
  new BBox(0, 0, 100, 0),
  new BBox(0, 0, 0, 100),
  new BBox(0, 0, 100, 0),
  new BBox(0, 0, 0, 100),
  new BBox(0, 0, 100, 0),
  new BBox(0, 0, 0, 100),
  new BBox(0, 0, 100, 0),
  new BBox(100, 200, 0, 100),
  new BBox(100, 200, 100, 0),
  new BBox(100, 200, 0, 100),
  new BBox(100, 200, 100, 0),
  new BBox(100, 200, 0, 100),
  new BBox(100, 200, 100, 0),
  new BBox(100, 200, 0, 100),
  new BBox(100, 200, 100, 0),
  new BBox(100, 200, 0, 100),
  new BBox(100, 200, 100, 0),
];
var rects = document.getElementsByTagName('rect');
for (var i = 0, length = rects.length; i < length; ++i) {
     var rectBBox = rects[i].getBBox();
     test(function() {
         assert_equals(rectBBox.x, expectedBoxes[i].x);
         assert_equals(rectBBox.y, expectedBoxes[i].y);
         assert_equals(rectBBox.width, expectedBoxes[i].width);
         assert_equals(rectBBox.height, expectedBoxes[i].height);
     }, 'Bounding box size, rect ' + (i + 1) + ', ' + expectedBoxes[i]);
}
</script>
